import React, { Component } from 'react';

class App extends Component {
  constructor (props) {
    super(props)
    // 绑定函数执行上下文
    this.clickHandler1Fn = this.clickHandler1.bind(this)
  }
  clickHandler1 (event) { // 构造函数中改变this指向 不推荐 --- 无法实现传递参数目标
    console.log(this)  // undefined  ==构造函数中改变this指向==>  App实例
    console.log(event) // SyntheticBaseEvent 合成事件   js原生 PointerEvent
  }

  clickHandler2 (event) { // 推荐 ---- 可以传递参数
    console.log(this) // undefined  ===jsx代码中改变了this指向===> App实例
    console.log(event)
  }

  // 无论有多少个参数，记住，事件对象始终为最后一个参数
  clickHandler3 (params1, params2, params3, event) {
    console.log(params1)
    console.log(params2)
    console.log(params3)
    console.log(event)
  }
  render() {
    return (
      <div>
        <h1>es5绑定事件以及传递参数</h1>
        <button onClick={ this.clickHandler1Fn }>点击-绑定事件方法1</button>
        <button onClick={ this.clickHandler2.bind(this) }>点击-绑定事件方法2 - 推荐</button>
        <button onClick={ this.clickHandler3.bind(this, 'a', 'b', 'c') }>点击-传递参数</button>
      </div>
    );
  }
}

export default App;